<template>
  <div>
    <h3>News</h3>
    <router-link to="/news/1" class="item1"> news1</router-link>
    <router-link to="/news/2" class="item1"> news2</router-link>
    <router-link to="/news/3" class="item1"> news3</router-link>
    <!--<p>{{detail}}</p>-->
    <!--<p>{{detail.title}}</p>-->
    <ul>
      <li v-for="v in detail.title">{{v}}</li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
    export default {
        name: 'News',
        props: {},
        components: {},
        data() {
            return {
              detail:{},
            }
        },
        computed: {
            name() {
                return this.data
            }
        },
      mounted(){
        //获得路由的uid
        //$route.params路由对象
        this.detail=this.getNews(this.$route.params.nid);//获得uid
      },
      methods: {
        getNews:function (nid) {//uid是index.js里的后缀
          //根据来的id，判断显示不同用户信息
          switch (nid) {
            case '1':
              return {nid:1,name:"New_First",content:"新闻热点",title:['杭州失联女童监控','山大回应学伴项目','全国鲜果价格上涨']};
            case '2':
              return {nid:2,name:"New_Second",content:"实时信息",title:['孙杨1500米自由','章案嫌犯父亲道歉','山下智久悼念喜']};
            case '3':
              return {nid:3,name:"New_Third",content:"中央七台",title:['杨丞琳初恋送祝福','天气预报','任天堂新款Switch']};
          }
        }
      },
      beforeRouteUpdate(to,from,next){//响应路由参数变换
        console.log(to);
        this.detail=this.getNews(to.params.nid);//to当前路由对象

        next();//循环往下走
      },

        filters: {
            fnName: function (value) {
                return value
            }
        }
    }
</script>

<style scoped>

  .item1{
    color: #317ee7;
    background-color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
  }
  .item1:hover{
    color: #fff;
    background-color: #317ee7;
    text-decoration: none;
  }
  ul{
    list-style: none;
  }
  li{
    list-style: none;
    color: #ff7700;
    font-size: 1.2rem;
    font-weight: bold;

  }
</style>
